iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 19

[Re:PixiJS - Day19] PIXI.Text / SVG 不是向量的

  • 分享至 

  • xImage
  •  

Text 與 SVG 在 html 裡是向量,在 Canvas / WebGL 裡最後的結果是點陣。
這篇會說明 Text 與 SVG 在 PixiJS 裡的特性。

先講小結: SVG 在讀入後是當成 Sprite物件 使用;
PIXI.TextSprite類別子類別,因此也可以想像成是當成圖片來用。
因此 SVG 與 Text 在最後都是點陣的形式,使用 Scale、指定寬高時,會因縮放失真


PIXI.Text 說明文件

這段說明有兩個重點:

  1. 繼承自 PIXI.Sprite
  2. 使用 CanvasAPI 繪製

PixiJS 在使用向量資訊時,最後產生在畫面上的仍是點陣
不會 因為縮放而自動調整


文字測試

[ Demo ]
1. 設定 fontSize:24
2. fontSize:24,scale.x 跟 scale.y 為 2
3. fontSize:48,scale.x 跟 scale.y 為 1

test 測試: 2 明顯變糊

const style1 = new PIXI.TextStyle({ fontSize: 24 });
const style2 = new PIXI.TextStyle({ fontSize: 48 });

let text = 'test 測試';
const testText1 = new PIXI.Text('test 測試: 1', style1);
const testText2 = new PIXI.Text('test 測試: 2', style1);
testText2.scale = 2;
const testText3 = new PIXI.Text('test 測試: 3', style2);

要讓 PIXI.Text 實體 改變字體大小不影響解析度 時,
重設 TextStyle.fontSize 屬性即可,會重繪一張 Canvas 材質來用

const style4 = new PIXI.TextStyle({ fontSize: 48 });
const testText4 = new PIXI.Text('test 測試: 4', style4 );
style4.fontSize = 96;
app.stage.addChild(testText4);

另一個PIXI.Text 的問題
The primary disadvantages is that each piece of text has it's own texture, which can use more memory. When text changes, this texture has to be re-generated and re-uploaded to the GPU, taking up time.
每個 PIXI.Text 的實體擁有自己的材質,即使是內容完全相同,也會 佔據記憶體

這部分會在後續幾天的文章提到


SVG測試

左圖: 原圖,scale.x 與 scale.y 為 1
右圖: scale.x 與 scale.y 為 2
即使讀入 SVG檔,由於最後當成點陣材質使用,會因為只寸關係失真
[ SVG Demo]

const svg1 = PIXI.Sprite.from('control.svg');
const svg2 = PIXI.Sprite.from('control.svg');
svg2.scale.x = 2;
svg2.scale.y = 2;

翻了目前的 SVG 相關討論,重設讀入 SVG 的大小不太容易
建議先 當成點陣圖 處理就好


約略帶到些材質的部分

本篇的文字情形:

即使文字內容、Style 皆相同,
仍視為不同Texture / BaseTexture

let testText = 'test 測試';
const testTextStyle = new PIXI.TextStyle({ fontSize: 24 });

const testText1 = new PIXI.Text(testText, testTextStyle);
const testText2 = new PIXI.Text(testText, testTextStyle);

// 兩個 TextureCache:{pixiid_4: e, pixiid_6: e}
console.log(PIXI.utils.TextureCache);
// 兩個 BaseTextureCache:{pixiid_4: e, pixiid_6: e}
console.log(PIXI.utils.BaseTextureCache);

本篇的SVG情形:

有兩個 Sprite實體 ,但只有一個 Texture一個 BeseTexture

// PIXI.Sprite.from 讀入相同的 SVG
const svg1 = PIXI.Sprite.from('control.svg');
const svg2 = PIXI.Sprite.from('control.svg');
svg2.scale.x = 2;
svg2.scale.y = 2;

// 一個 TextureCache: control.svg
console.log(PIXI.utils.TextureCache);
// 一個 BaseTextureCache: control.svg
console.log(PIXI.utils.BaseTextureCache);

接下來幾篇會討論較底層的 Texture / BeseTexture
在專案較大、考慮效能記憶體優化時,會需注意


上一篇
[Re:PixiJS - Day18] Graphis 類別 drawRoundedRect() 方法畫圓角矩形時會遇到的問題
下一篇
[Re:PixiJS - Day20] 用 tint() 方法填色時,原物件需為白色或灰階
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言